<template>
  <div class="example">
    <div class="part">
      <div class="title">
        <span class="number">3</span>
        <span class="name titleName">API List</span>
      </div>
      <div class="cont">All APIs are defined in this document.</div>
      <div class="table1" style="margin-top: 10px">
        <el-table
          :data="tableData1"
          border>
          <el-table-column
            prop="API"
            label="API"
            width="180">
          </el-table-column>
          <el-table-column
            prop="APIProvider"
            label="API Provider"
            width="260">
          </el-table-column>
          <el-table-column
            prop="Requester"
            label="Requester"
            width="220">
          </el-table-column>
          <el-table-column
            prop="Format"
            label="Format"
            width="220">
          </el-table-column>
          <el-table-column
            prop="Description"
            label="Description"
            width="260">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Example",
    data() {
      return {
        tableData1: [{
          API: 'Token API',
          APIProvider: 'Lenovo API Platform',
          Requester: 'Partner/Lenovo Applications',
          Format: 'JSON',
          Description: 'API Authentication'
        }, {
          API: 'CreditInfo API',
          APIProvider: 'Lenovo API Platform',
          Requester: 'Partner/Lenovo Applications',
          Format: 'JSON',
          Description: 'getCreditInfo'
        }, {
          API: 'FinancyInfo API',
          APIProvider: 'Lenovo API Platform',
          Requester: 'Partner/Lenovo Applications',
          Format: 'JSON',
          Description: 'getFinancyInfo'
        }, {
          API: 'YearReport API',
          APIProvider: 'Lenovo API Platform',
          Requester: 'Partner/Lenovo Applications',
          Format: 'JSON',
          Description: 'getYearReport'
        }, {
          API: 'CompanyBranch API',
          APIProvider: 'Lenovo API Platform',
          Requester: 'Partner/Lenovo Applications',
          Format: 'JSON',
          Description: 'getCompanyBranch'
        }],
      }
    }
  }
</script>

<style lang="scss" scoped>
  .example{
    margin: 10px 41px 0 41px;
    .part{
      margin: 30px 0;
      .title{
        margin:10px;
        font-weight: bold;
        .number{
          font-size: 20px;
          color: #0090e9;
          margin-right: 10px;
        }
        .name{
          font-size: 20px;
          color: #000;
        }
        .titleName{
          font-size: 24px;
        }
      }
      .cont{
        font-size: 16px;
        line-height:24px;
      }
      .json{
        .url{
          color:#0090e9;
          cursor: pointer;
        }
        .url:hover{
          text-decoration: underline;
        }
      }
      .table1{
        width:1142px;
      }
      .table2{
        width:880px;
      }
    }
  }

</style>
